$(document).ready(function() {
	$.getJSON('/patients_count.json', function(data) {
		var patientXaxis = [];
		var patientData = [];
		var months = {"1":"Jan", "2":"Feb", "3":"Mar", "4":"Apr", "5":"May", "6":"Jun", 
		"7":"Jul", "8":"Aug", "9":"Sep", "10":"Oct", "11":"Nov", "12":"Dec"};

		$.each(data, function(key, val) {
			patientXaxis.push(months[val.month] + " '" + new String(val.year).substring(2));
			patientData.push(val.count);
		});

		var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Patient Registrations'
            },
            subtitle: {
                text: 'Count of PATIENTREGVISIT encounters'
            },
            xAxis: {
                categories: patientXaxis
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Number of Registrations'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return this.x +': '+ this.y;
                }
            },
            plotOptions: {
                series: {
                	cursor: 'pointer',
                	point: {
	                    events: {
		                	click: function(e) {
		                		var splits = new String(this.category).split("'");
		                		var chosen = 1;
		                		$.each(months, function(x,y){ if(splits[0].trim() === y) chosen = x});
		                		populatePie('/patients_for_location.json?month='+ chosen +'&year=20' + splits[1]);
		                	}
	            		}       
            		}           
                },                
            },
            series: [{
                name: 'Patients',
                data: patientData                
            }]
        });
    });

	populatePie('/patients_location.json');
	
	function populatePie(url) {
		$.getJSON(url, function(data) {
		
			var pie = [];
			$.each(data, function(key, val) {
				var row = [];
				row[0] = val.facility_name;
				row[1] = new Number(val.count);
				pie.push(row);
			});

			var chart = new Highcharts.Chart({
			chart: {
			    renderTo: 'container2',
			    plotBackgroundColor: null,
			    plotBorderWidth: null,
			    plotShadow: false
			},
			title: {
			    text: 'Facilities where Patients registered'
			},	
	        subtitle: {
	            text: 'Location of PATIENTREGVISIT encounters'
	        },
			tooltip: {
			    pointFormat: '{series.name}: <b>{point.y}</b>',
				percentageDecimals: 1
			},
			plotOptions: {
			    pie: {
			        allowPointSelect: true,
			        cursor: 'pointer',
			        dataLabels: {
			            enabled: true,
			            color: '#000000',
			            connectorColor: '#000000',
			            formatter: function() {
			            	return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage * 100)/100 +' %';
			            }
			        }
			    }
			},
			series: [{
			    type: 'pie',
			    name: 'Patients share',
			    data: pie
			}]
			});
	    });
	}

});